<template>
  <div class="notice"><span> <img src="../../assets/notice.png"></span>
    <div class="textBox">
      <transition name="slide">
        <p  class="text" :key="text.id" @click="coinGroupBtn(text)">{{fiiter(text.val)}}</p>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'scroll',
  data () {
    return {
      textArr: [
      ],
      number: 0,
    }
  },
  computed: {
    text () {
      return {
    id:this.number,
        val: this.textArr[this.number]
      }
    }
  },
  mounted () {
    this.startMove();
      this.$http.post('v1/bulletin',{types:22,size:3}).then((res)=>{
          if(res.data.code==200){
                this.articleList = res.data.data.bulletin;
        let list=[];
          this.articleList.filter(item=>{
              list.push(item.title) 
          })
          this.textArr=list;
          }
       })
  },
  methods: {
      fiiter(res){
          if(!res){
              return res;
          }
          if(res.length>20){
              return res.substring(0,15) +'...';
          }else {
            return res;
          }
      },
        coinGroupBtn(text){
          let textArt=this.articleList.filter(item=>{
                return item.title==text.val;
             })
            this.$router.push({
          path: `/center/detail/${'?id='+textArt[0].id}`
        });
        },
    startMove () {
      // eslint-disable-next-line
      let timer = setTimeout(() => {
        if (this.number === (this.textArr.length-1)) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 3000); // 滚动不需要停顿则将2000改成动画持续时间
    }
  }
}
</script>

<style scoped>
  h2 {
    padding: 20px 0
  }
  .notice{
      width: 100%;
      margin: 0 auto;
      padding-left: 20px;
      padding-right: 20px;
  }
  .notice span{
         top: 20px;
    position: relative;
    left: 20px;
  }
  .textBox {
    width: 85%;
    height:72px;
    padding-left: 18px;
    margin: 0 auto;
    position: relative;
    line-height: 70px;
    text-align: left;
  }
  .text {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .slide-enter-active, .slide-leave-active {
    transition: all 0.2s linear;
  }
  .slide-enter{
    transform: translateY(30px) scale(1);
  }
  .slide-leave-to {
    transform: translateY(-30px) scale(1);
  }
</style>